<template>
  <div>
    <v-card-title>
      <h3>Minions</h3>
      <v-spacer></v-spacer>
      <v-btn flat color="primary" icon @click.stop="loadMinions" small><v-icon>cached</v-icon></v-btn>
      <v-text-field
        append-icon="search"
        label="Search"
        single-line
        hide-details
        v-model="search"
      ></v-text-field>
    </v-card-title>
    <v-data-table
      :headers="headers"
      :items="items"
      class="elevation-1"
      :search="search"
      :rowsPerPageItems="rowsPerPageItems"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.minion }}</td>
        <td class="text-xs-center">{{ props.item.status }}</td>
        <td class="justify-center layout px-0">
          <v-btn small dark color="primary" v-if="props.item.status !== 'Accept'" @click="acceptMinion(props.item.minion)">
            Accept Key
          </v-btn>
          <v-btn small dark color="secondary" @click="rejectMinion(props.item.minion)">
            Reject Key
          </v-btn>
          <v-btn small dark color="warning" @click="deleteMinion(props.item.minion)">
            Delete Key
          </v-btn>
        </td>
      </template>
    </v-data-table>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('minions')
export default {
  name: 'minions',
  data: function () {
    return this.$store.state.minions
  },
  methods: {
    ...mapActions({
      loadMinions: 'loadMinions',
      acceptMinion: 'acceptMinion',
      rejectMinion: 'rejectMinion',
      deleteMinion: 'deleteMinion'
    })
  },
  mounted () {
    this.loadMinions()
  }
}
</script>
